<template>
  <div id="web-home-canvas-bg" :style="$bgImage(homeBgImg)" class="w-image-fit">
    <component :is="componentName" />
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { randomItem } from '~/utils/array'

@Component({
  name: 'ComGlobalD3',
  components: {
    A00: () => import('@/components/global/homeAnimation/a_00'),
    A01: () => import('@/components/global/homeAnimation/a_01'),
    A02: () => import('@/components/global/homeAnimation/a_02'),
    A03: () => import('@/components/global/homeAnimation/a_03')
  }
})
export default class ComGlobalD3 extends Vue {
  componentArr = ['A00', 'A01', 'A02', 'A03']
  componentName = 'A00'
  homeBgImg = process.env.HOME_BG_IMG

  mounted () {
    this.updateCom()
  }

  updateCom () {
    // 清除掉多有的canvas
    this.componentName = randomItem(this.componentArr)
  }
}
</script>

<style scoped lang="less">
#web-home-canvas-bg {
  position: relative;
  overflow: hidden;
  height: 100vh;
  .home-video {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 400px;
  }
}
</style>
